<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-bar">
      <input
        class="search-input"
        placeholder="请输入关键字"
        v-model="searchParams.keyword"
      />
      <button class="search-button" @tap="onSearch">搜索</button>
      <button class="filter-button" @tap="toggleFilterPanel">筛选</button>
			<button class="create-button" @tap="onCreateOrder">新建</button>
    </view>

    <!-- 筛选面板 -->
    <view
      class="filter-panel"
      v-if="showFilterPanel"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      :style="{ transform: 'translateY(' + moveY + 'px)' }"
    >
      <!-- 标题容器，包含标题和右上角关闭按钮 -->
      <view class="filter-header">
        <view class="filter-title">筛选条件</view>
        <button class="close-button" @tap="toggleFilterPanel">关闭</button>
      </view>

      <!-- 工单分类 -->
      <view class="filter-group">
        <view class="filter-label">工单分类</view>
        <picker
          mode="selector"
          :range="categories"
          :value="pickerIndexes.category"
          @change="e => onPickerChange(e, 'category', categories)"
        >
          <view class="picker-value">{{ searchParams.category || '请选择' }}</view>
        </picker>
      </view>

      <!-- 工单状态 -->
      <view class="filter-group">
        <view class="filter-label">工单状态</view>
        <picker
          mode="selector"
          :range="statuses"
          :value="pickerIndexes.status"
          @change="e => onPickerChange(e, 'status', statuses)"
        >
          <view class="picker-value">{{ searchParams.status || '请选择' }}</view>
        </picker>
      </view>

      <!-- 优先级 -->
      <view class="filter-group">
        <view class="filter-label">优先级</view>
        <picker
          mode="selector"
          :range="priorities"
          :value="pickerIndexes.priority"
          @change="e => onPickerChange(e, 'priority', priorities)"
        >
          <view class="picker-value">{{ searchParams.priority || '请选择' }}</view>
        </picker>
      </view>

      <!-- 受理客服组 -->
      <view class="filter-group">
        <view class="filter-label">受理客服组</view>
        <picker
          mode="selector"
          :range="serviceGroups"
          :value="pickerIndexes.serviceGroup"
          @change="e => onPickerChange(e, 'serviceGroup', serviceGroups)"
        >
          <view class="picker-value">{{ searchParams.serviceGroup || '请选择' }}</view>
        </picker>
      </view>

      <!-- 受理客服 -->
      <view class="filter-group">
        <view class="filter-label">受理客服</view>
        <picker
          mode="selector"
          :range="serviceAgents"
          :value="pickerIndexes.serviceAgent"
          @change="e => onPickerChange(e, 'serviceAgent', serviceAgents)"
        >
          <view class="picker-value">{{ searchParams.serviceAgent || '请选择' }}</view>
        </picker>
      </view>

      <!-- 创建时间 -->
      <view class="filter-group">
        <view class="filter-label">创建时间</view>
        <input
          type="date"
          v-model="searchParams.startDate"
          placeholder="开始时间"
          class="date-input"
        />
        <input
          type="date"
          v-model="searchParams.endDate"
          placeholder="结束时间"
          class="date-input"
        />
      </view>

      <!-- 更新时间 -->
      <view class="filter-group">
        <view class="filter-label">更新时间</view>
        <input
          type="date"
          v-model="searchParams.updateStartDate"
          placeholder="开始时间"
          class="date-input"
        />
        <input
          type="date"
          v-model="searchParams.updateEndDate"
          placeholder="结束时间"
          class="date-input"
        />
      </view>

      <!-- 操作按钮 -->
      <view class="filter-actions">
        <button class="reset-button" @tap="resetFilters">重置</button>
        <button class="confirm-button" @tap="applyFilters">确定</button>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="result-list">
      <view
        class="task-card"
        v-for="task in filteredTasks"
        :key="task.id"
				@tap="showTaskDetails(task)"
      >
        <view class="task-summary">
          <view class="task-title">{{ task.title }}</view>
          <!-- 不同状态文字不同颜色 -->
          <view
            class="task-status"
            :style="{ color: statusColorMap[task.status] || '#333' }"
          >
            {{ task.status }}
          </view>
        </view>
        <view class="task-details">
          编号：{{ task.id }}<br />
          分类：{{ task.category }}<br />
          优先级：{{ task.priority }}<br />
          创建人：{{ task.creator }}<br />
          创建时间：{{ task.createTime }}<br />
          更新时间：{{ task.updateTime }}
        </view>
      </view>
    </view>
  </view>
	
	<!-- 工单弹窗 -->
	<view v-if="isModalVisible" class="modal-overlay" @tap="closeModal">
	  <view class="modal-content" @tap.stop>
	    <view class="modal-header">
	      <span class="modal-title">工单详情</span>
	      <button class="close-button" @tap="closeModal">关闭</button>
	    </view>
	    <view class="modal-body">
	      <view class="task-details">
	        编号：{{ selectedTask.id }}<br />
	        分类：{{ selectedTask.category }}<br />
	        优先级：{{ selectedTask.priority }}<br />
	        创建人：{{ selectedTask.creator }}<br />
	        创建时间：{{ selectedTask.createTime }}<br />
	        更新时间：{{ selectedTask.updateTime }}<br />
	      </view>
	      <button class="approve-button" @tap="approveTask">审核</button>
	    </view>
	  </view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 处理新建工单点击事件
const onCreateOrder = () => {
  uni.navigateTo({
    url: '/pages/Orders/Create'
  });
};

// 初始筛选参数（用于输入）
const searchParams = ref({
  keyword: '',
  category: '',
  status: '',
  priority: '',
  serviceGroup: '',
  serviceAgent: '',
  startDate: '',
  endDate: '',
  updateStartDate: '',
  updateEndDate: '',
});

// 最终提交的筛选条件
const activeFilters = ref({ ...searchParams.value });

// 各筛选项数据 (模拟数据,后期更改)
const categories = ref(['技术支持', '售后服务', '其他']);
const statuses = ref(['待审核', '处理中', '已完成']);
const priorities = ref(['高', '中', '低']);
const serviceGroups = ref(['客服A组', '客服B组']);
const serviceAgents = ref(['张三', '李四', '王五']);

// 用于存储各 picker 的选中索引（便于显示选中项）
const pickerIndexes = ref({
  category: null,
  status: null,
  priority: null,
  serviceGroup: null,
  serviceAgent: null,
});

// 通用的 picker 变更处理
const onPickerChange = (e, key, options) => {
  pickerIndexes.value[key] = e.detail.value;
  searchParams.value[key] = options[e.detail.value];
};

// 状态对应字体颜色映射
const statusColorMap = {
  '待审核': '#F0A04E', // 橙色
  '处理中': '#5BC0DE', // 蓝色
  '已完成': '#5CB85C', // 绿色
  // 如有其他状态，可继续补充
};

// 模拟工单数据 (更换api)
const tasks = ref([
  {
    id: '1',
    title: '工单A',
    status: '待审核',
    category: '技术支持',
    priority: '高',
    creator: '张三',
    createTime: '2025-01-01',
    updateTime: '2025-01-02',
  },
  {
    id: '2',
    title: '工单B',
    status: '处理中',
    category: '售后服务',
    priority: '中',
    creator: '李四',
    createTime: '2025-01-03',
    updateTime: '2025-01-04',
  },
]);

// 使用 computed 根据 activeFilters 过滤任务
const filteredTasks = computed(() => {
  return tasks.value.filter(task => {
    const f = activeFilters.value;
    // 关键字匹配（简单使用 includes）
    const keywordMatch = !f.keyword || task.title.includes(f.keyword);
    const categoryMatch = !f.category || task.category === f.category;
    const statusMatch = !f.status || task.status === f.status;
    const priorityMatch = !f.priority || task.priority === f.priority;
    const serviceGroupMatch = !f.serviceGroup || task.serviceGroup === f.serviceGroup;
    const serviceAgentMatch = !f.serviceAgent || task.serviceAgent === f.serviceAgent;
    const createTimeMatch =
      (!f.startDate || task.createTime >= f.startDate) &&
      (!f.endDate || task.createTime <= f.endDate);
    const updateTimeMatch =
      (!f.updateStartDate || task.updateTime >= f.updateStartDate) &&
      (!f.updateEndDate || task.updateTime <= f.updateEndDate);

    return (
      keywordMatch &&
      categoryMatch &&
      statusMatch &&
      priorityMatch &&
      serviceGroupMatch &&
      serviceAgentMatch &&
      createTimeMatch &&
      updateTimeMatch
    );
  });
});

// 控制筛选面板显示
const showFilterPanel = ref(false);
const toggleFilterPanel = () => {
  if (!showFilterPanel.value) {
    moveY.value = 0;
  }
  showFilterPanel.value = !showFilterPanel.value;
};

// 下滑关闭面板功能
const startY = ref(0);
const moveY = ref(0);
const isSliding = ref(false);
const onTouchStart = (e) => {
  startY.value = e.touches[0].clientY;
  isSliding.value = false;
};
const onTouchMove = (e) => {
  const currentY = e.touches[0].clientY;
  moveY.value = Math.max(0, currentY - startY.value);
  if (moveY.value > 0) {
    isSliding.value = true;
  }
};
const onTouchEnd = () => {
  if (isSliding.value && moveY.value > 100) {
    showFilterPanel.value = false;
  }
  moveY.value = 0;
  isSliding.value = false;
};

// 搜索按钮（提交关键字筛选）
const onSearch = () => {
  activeFilters.value = { ...searchParams.value };
  showFilterPanel.value = false;
};

// “确定”按钮
const applyFilters = () => {
  activeFilters.value = { ...searchParams.value };
  showFilterPanel.value = false;
};

// 重置筛选条件（同时重置 pickerIndexes）
const resetFilters = () => {
  searchParams.value = {
    keyword: '',
    category: '',
    status: '',
    priority: '',
    serviceGroup: '',
    serviceAgent: '',
    startDate: '',
    endDate: '',
    updateStartDate: '',
    updateEndDate: '',
  };
  pickerIndexes.value = {
    category: null,
    status: null,
    priority: null,
    serviceGroup: null,
    serviceAgent: null,
  };
};

// 工单弹窗
// 当前选中的工单
const selectedTask = ref(null);

// 控制弹窗显示
const isModalVisible = ref(false);

// 显示工单详情弹窗
const showTaskDetails = (task) => {
  selectedTask.value = task;
  isModalVisible.value = true;
};

// 关闭弹窗
const closeModal = () => {
  selectedTask.value = null;
  isModalVisible.value = false;
};

// 审核操作 (api修改)
const approveTask = () => {
  if (selectedTask.value) {
    selectedTask.value.status = '已审核';  
    
    
    uni.showToast({
      title: '工单已审核',  
      icon: 'success',     
      duration: 2000       
    });

    closeModal();  // 关闭弹窗
  }
};

</script>

<style lang="scss" scoped>
/* 页面整体布局 */
view {
  font-family: Arial, sans-serif;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #e0e0e0;

  .search-input {
    flex: 1;
    height: 64rpx;
    font-size: 28rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 8rpx;
    margin-right: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .search-button,
  .filter-button,
  .create-button {
    flex-shrink: 0;
    height: 64rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #ffffff;
    border: none;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .search-button {
    background-color: #007aff;
    &:hover {
      background-color: #005bb5;
    }
  }

  .filter-button {
    background-color: #ff9500;
    &:hover {
      background-color: #cc7a00;
    }
  }

  .create-button {
    background-color: #28a745; 
    &:hover {
      background-color: #218838;
    }
  }
}


/* 筛选面板 */
.filter-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  z-index: 100;
  transition: transform 0.3s ease-out;
}

/* 筛选面板标题及关闭按钮 */
.filter-header {
  position: relative;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;

  .filter-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  .close-button {
    position: absolute;
    top: 50%;
    right: 20rpx;
    transform: translateY(-50%);
    font-size: 28rpx;
    color: #ff3b30;
    background: none;
    border: none;
  }
}

.filter-group {
  margin-bottom: 20rpx;

  .filter-label {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 10rpx;
  }

  .picker-value {
    padding: 20rpx;
    font-size: 28rpx;
    color: #666666;
    background-color: #f7f7f7;
    border: 2rpx solid #e0e0e0;
    border-radius: 8rpx;
  }

  .date-input {
    padding: 20rpx;
    font-size: 28rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 8rpx;
    margin-top: 10rpx;
  }
}

.filter-actions {
  display: flex;
  justify-content: space-between;

  .reset-button {
    flex: 1;
    padding: 20rpx;
    font-size: 28rpx;
    color: #ff3b30;
    background-color: #ffffff;
    border: 2rpx solid #ff3b30;
    border-radius: 8rpx;
    margin-right: 10rpx;
    cursor: pointer;
    &:hover {
      background-color: #ffe6e6;
    }
  }

  .confirm-button {
    flex: 1;
    padding: 20rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: #007aff;
    border: none;
    border-radius: 8rpx;
    cursor: pointer;
    &:hover {
      background-color: #005bb5;
    }
  }
}

/* 搜索结果 */
.result-list {
  margin-top: 20rpx;
  padding: 20rpx;

  .task-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    border-bottom: 2rpx solid #e0e0e0;
    margin-bottom: 20rpx;
    border-left: 4rpx solid #007aff;
    padding: 20rpx;

    .task-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .task-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      .task-status {
        font-size: 28rpx;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    .task-details {
      font-size: 28rpx;
      color: #666666;
      line-height: 1.6;
    }
  }
}

// 工单弹窗样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);  
  display: flex;
  justify-content: center;  
  align-items: center;  
  z-index: 1000; 
}

.modal-content {
  background-color: white;
  border-radius: 16rpx;  
  width: 85%;  
  max-width: 600rpx;  
  padding: 30rpx;  
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);  
}

.modal-header {
  display: flex;
  justify-content: space-between;  /* 两端对齐 */
  align-items: center;

  .modal-title {
    font-size: 32rpx; 
    font-weight: bold;
    color: #333; 
  }

  .close-button {
    background: none; 
    border: none; 
    font-size: 28rpx;  
    color: #ff3b30;  
    cursor: pointer;  
  }
}

.modal-body {
  margin-top: 30rpx; 
  font-size: 28rpx;  
  color: #666;
}

.approve-button {
  background-color: #5cb85c;  
  color: #fff;  
  padding: 20rpx 40rpx; 
  border-radius: 8rpx;  
  font-size: 28rpx; 
  cursor: pointer;  
  margin-top: 30rpx;  
}
</style>
